/*! something */
@charset 'utf-8';
@page :left {
    margin: 2em;
}
@media screen and (foo: 1) {
    .class {
        color: red;
    }
}

@import 'foo' layer(bar);

@layer foo {
    .class {
        color: red;
    }

    @layer bar {
        .class2 {
            color: red;
        }
    }
}

@layer foo.bar {
    .class {
        color: red;
    }
}

@layer {
    .class {
        color: red;
    }
}

*.class element#id[attr] [attr|="asd"][attr=value i]:pseudo::pseudo ~ :not(a, b) + :nth-child(odd):nth-child(2n + 1),
svg|*:matches(a)::slotted(c) > :nth-child(odd of a, :b):nth-child(2n + 1 of [a]),
:has(> img) {
    color: green;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png',sizingMethod='scale') alpha(opacity=80);
    width: expression(1 + 2);
    background:
        ident 1.2e+3 100% 4em/5ex calc(1em + 3% * 5),
        url(path/to.png) url( 'path/test.svg' )
        u+123-456 u+123???
        rgba(1, 2, 3, 4) #def #123abc "string" 'string' (parenthesis) [ident] !important;
}

@media (device-aspect-ratio: 16/9) {
    *|span:before {
        --custom1: { something !important };
        --custom2: ([]) !important;
        background: element(#id);
    }
}

@supports (box-shadow: 1px 2px black !important) {
    .rule {
        box-shadow: var(--something, fallback);
    }
}

.-a#-b:-c::-d[-e][*|-f] {
    -foo: 123;
}

:lang(en, 'de-DE') {}

<!-- /* CDO/CDC */ -->
@import 'foo' screen;
@keyframes 'anim' {
    from  { //color: red }
    50.1% { color: green; background: green }
    100%  { ;color: blue;; }
}

edge\ .c\61ases {
    --empty-var: ;
    --bad-var:;
    number: 0.1.2.3;
}

.foo {
    color: blue;
    &:hover {
        color: green;
    }
    @nest :not(&) {
        color: yellow;
    }
    @media (orientation: vertical) {
        color: red;
    }
    @starting-style {
        color: blue;
    }
    @scope (a) to (b) {
        color: black;
    }
}

@media (100px < width < 400px) {
    @container foo {
        .test {
            color: #0f08;
        }
    }
}

/* general enclosed */
@media (foo: 123) and (1) and foo(1) {}
@supports selector(.a) {}
@container (width > 500px) and style(--foo:1) {}
@layer foo, bar {}
@starting-style {}
@scope (a) to (b) { c {} }
